<template>
	<div class="topBar">
		<div v-bind:class="{'my-info': $store.state.isCollapse, 'my-info1': !$store.state.isCollapse}">
			<img src="../../assets/LOGO1.png" v-if='$store.state.isCollapse'>
			<img src="../../assets/logos.png" alt="" v-else>
			<!-- <span>征地拆迁</span> -->
		</div>
		<div class="menus">
			<span @click="$store.commit('toggle')"></span>
		</div>
		<div class="profile">
			<div class="ivu-avatar">
				<img :src="Host+xpic" class="imgs" />
			</div>
			<el-dropdown trigger="click" class="usrs">
				<div class="el-dropdown-link">
		      		<span class="uasename">{{Login}}</span>
				</div>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item>
						<span @click="grsz()">个人设置</span>
					</el-dropdown-item>
					<el-dropdown-item>
						<span @click="cancel()">退出</span>
					</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
		<div class="sweet-overlay" v-if='modiy' v-loading="loading">
			<el-dialog title="修改个人信息" :visible.sync="modiy" width="30%" :modal=false>
				<el-form ref="formLabelAlign" :model="formLabelAlign" label-width="120px">
					<el-form-item label="姓名">
						<el-input disabled v-model="formLabelAlign.cName"></el-input>
					</el-form-item>
					<el-form-item label="联系电话">
						<el-input v-model="formLabelAlign.tel"></el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input v-model="formLabelAlign.pass" type='password'></el-input>
					</el-form-item>
					<el-form-item label="上传头像">
						<div>
						<el-upload
						  class="avatar-uploader"
						  :action=this.host
						  :show-file-list="false"
						  :on-success="handleAvatarSuccess"
						  :before-upload="beforeAvatarUpload">
						  <img v-if="imageUrl" :src="Host+imageUrl" class="avatar">
						  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</div>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="modiy = false">取 消</el-button>
					<el-button type="primary" @click="user()">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import store from "@/vuex/store";
import api from '../../axios/api'
export default {
  name: "topBar",
  data() {
    return {
    	loading:false,
    	xpic:'',
    	Host:api.host,//主机
    	modiy:false,
    	username:'',
		Login:'',
    	formLabelAlign: {
			cName: '',
			pass: '',
			tel: ''
		},
		imageUrl: '',//图片路径
		id:'',
		host:'',//上传地址
    };
  },
  store,
  created(){
  	this.host = api.files
	  this.username = sessionStorage.CNName
	  switch(sessionStorage.UserType){
		case '1':
			  this.Login=sessionStorage.Login+'-管理员';
			  break;
		case '2':
			  this.Login=sessionStorage.Login+'-镇征拆';
			  break;
		case '3':
			  this.Login=sessionStorage.Login+'-镇财务';
			  break;
		case '4':
			  this.Login=sessionStorage.Login+'-县征拆';
			  break;
		case '5':
			  this.Login=sessionStorage.Login+'-县财务';
			  break;
		case '6':
			  this.Login=sessionStorage.Login+'-业主';
			  break;
		case '7':
			  this.Login=sessionStorage.Login+'-业主财务';
			  break;
		case '8':
			  this.Login=sessionStorage.Login+'-领导通道';
			  break;
	  }
	  
  	this.id = sessionStorage.id
  	this.xpic = sessionStorage.HeadIMG
  },
  methods:{
  	handleAvatarSuccess(res, file) {
  		this.loading = false;
	    this.imageUrl = res.Data.filePaht.substring(2,res.Data.filePaht.length);
	    this.$message({
        	message: "上传成功",
        	type: "success"
       });
    },
    onError() {
      this.loading = false;
      this.$message.error("上传失败");
    },
    beforeAvatarUpload(file) {
    	this.loading = true
	    const isJPG = file.type === 'image/jpeg';
        const isGIF = file.type === 'image/gif';
        const isPNG = file.type === 'image/png';
        const isBMP = file.type === 'image/bmp';
	    const isLt2M = file.size / 1024 / 1024 < 2;
	    if (!isJPG && !isGIF && !isPNG && !isBMP) {
            this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');
        }
	    if (!isLt2M) {
	      this.$message.error('上传头像图片大小不能超过 2MB!');
	    }
        return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    },
  	//退出
  	cancel(){
  		this.$get(api.cancel+'/'+ sessionStorage.id).then((response)=>{
			if(response.data.state==200&&response.data.Data == true){
				this.$router.push({
					path:'/'
				})
				sessionStorage.clear()
			}
  		}).catch((err)=>{
      	   this.loading = false
        })
  	},
  	//修改个人信息
  	grsz(){
  		this.formLabelAlign.cName = sessionStorage.CNName
  		this.formLabelAlign.tel = sessionStorage.tel
  		this.imageUrl = sessionStorage.HeadIMG
  		this.modiy = true
  	},
  	user(){
  		if(this.formLabelAlign.cName == '' || this.formLabelAlign.tel==''||this.formLabelAlign.pass==''){
  			this.$message.error("不能为空");
  			return
  		}
  		this.$post(api.updater,{
		  "ID": this.id,
		  "CNName": this.formLabelAlign.cName,
		  "Tel": this.formLabelAlign.tel,
		  "HeadIMG": this.imageUrl,
		  "Pwd": this.$md5(this.formLabelAlign.pass)
		}).then((response)=>{
			if(response.isOK == true && response.state==200){
				this.modiy = false
				sessionStorage.CNName = this.formLabelAlign.cName
				sessionStorage.HeadIMG = this.imageUrl
				sessionStorage.tel = this.formLabelAlign.tel
				window.location.reload()
			}
  		}).catch((err)=>{
      	   this.loading = false
        })
  	}
  }
};
</script>

<style scoped>
.topBar {
  height: 60px;
  background: #564aa3;
  width: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 200;
  box-shadow: 0px -13px 71px #888888;
}
.menus {
  height: 100%;
  float: left;
}
.menus span {
  display: inline-block;
  width: 25px;
  height: 4px;
  border-top: 12px double #ffffff;
  border-bottom: 4px solid #ffffff;
  margin-top: 20px;
}
.my-info {
  width: 200px;
  height: 100%;
  text-align: center;
  float: left;
  position: relative;
  transition: all 0.2s ease;
}
.my-info img{
	width: 100%;
    margin-top: 4px;
}
.my-info1 img{
	width: 100%;
	/*height: 40px;*/
	margin-top: -5px;
}
.my-info span{
	line-height: 60px;
    color: #fff;
    font-weight: 600;
    font-size: 20px;
}
.my-info1 span{
    color: #fff;
    font-weight: 600;
    font-size: 17px;
}
.my-info1 {
  width: 70px;
  text-align: center;
  float: left;
  position: relative;
  padding: 8px 0px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}
.profile{
	float: right;
	margin-right: 20px;
	text-align: center;
}
.ivu-avatar {
	display: inline-block;
	text-align: center;
	background: #ccc;
	color: #fff;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
	width: 28px;
	height: 28px;
	line-height: 32px;
	border-radius: 16px;
	margin-top: 5px;
}
.ivu-avatar img {
	width: 100%;
	height: 28px;
	display: block;
	font-size: 0;
}
.usrs{
	display: block;
}
.uasename {
	display: block;
	text-align: center;
	color: #fff;
}
.sweet-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 999999;
}
</style>